<template>
  <div class="container">
    <div class="contentBox">
      <router-view></router-view>
    </div>
    <van-tabbar v-model="active">
      <van-tabbar-item  replace :to="`/articleList/${$store.state.code}`">
        <span>话题</span>
        <template #icon="props">
          <img :src="props.active ? icon['h-active'] : icon['h-inactive']" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item>
        <template #icon="props">
          <img class="addTopicBtn" style="height:60px;width:60px"  @click="routerPush" :src="require('src/assets/imgs/add.png')" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item  replace to="/my">
        <span>我的</span>
        <template #icon="props">
          <img :src="props.active ? icon['m-active'] : icon['m-inactive']" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';

export default {
    setup() {
        const $router = useRouter();
        const active = ref(3);
        const icon = {
            'h-active': require('src/assets/imgs/home-i.png'),
            'h-inactive': require('src/assets/imgs/home.png'),
            'm-active': require('src/assets/imgs/my-i.png'),
            'm-inactive': require('src/assets/imgs/my.png')
        };
        const routerPush = () => {
            let params = {
                'name': 'add',
                'params': {
                    'type': '1',
                    'targetId': '1',
                    'id': '1'
                }
            };
            $router.push(params);
        };
        return {
            routerPush,
            icon,
            active
        };
    }
};
</script>
<style lang='less' scoped>
.container {
  .addTopicBtn {
    height: 60px;
    width: 60px;
    margin-bottom: 20px;
    z-index: 9999;
    position: relative;
  }
  .contentBox {
    height: calc(100vh - 50px);
    overflow: auto;
  }
}
</style>